<template>
  <view class="account-type-modal" v-if="visible" @click="closeModal">
    <view class="modal-content" @click.stop>
      <!-- 弹窗头部 -->
      <view class="modal-header">
        <text class="modal-title">选择账号类型：已选择{{ selectedAccountTypes.length }}个</text>
        <view class="close-btn" @click="closeModal">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 账号类型选项列表 -->
      <view class="account-type-list">
        <view class="account-type-item" @click="selectAccountType('all')">
          <view class="radio-btn" :class="{ checked: selectedAccountTypes.includes('all') }">
            <text class="check-icon" v-if="selectedAccountTypes.includes('all')">✓</text>
          </view>
          <text class="account-type-name">全部选择</text>
        </view>
        
        <view 
          class="account-type-item" 
          :class="{ selected: selectedAccountTypes.includes(accountType.id) }" 
          v-for="accountType in accountTypeList" 
          :key="accountType.id"
          @click="selectAccountType(accountType.id)"
        >
          <view class="radio-btn" :class="{ checked: selectedAccountTypes.includes(accountType.id) }">
            <text class="check-icon" v-if="selectedAccountTypes.includes(accountType.id)">✓</text>
          </view>
          <text class="account-type-name">{{ accountType.name }}</text>
        </view>
      </view>
      
      <!-- 完成按钮 -->
      <view class="complete-btn" @click="confirmSelection">
        <text class="btn-text">完成</text>
      </view>
    </view>
  </view>
</template>

<script>
import { goodsApi } from '@/utils/api.js'

export default {
  name: 'AccountTypeSelector',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultSelected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedAccountTypes: [], // 选中的账号类型数组
      accountTypeList: [] // 账号类型列表数据
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.selectedAccountTypes = [...this.defaultSelected]
        this.getAccountTypeList()
      }
    }
  },
  mounted() {
    this.getAccountTypeList()
  },
  methods: {
    // 获取账号类型列表
    async getAccountTypeList() {
      try {
        const response = await goodsApi.getGoodsTemps()
        
        const responseData = response
        console.log('账号类型列表接口返回数据:', responseData)
        
        if (responseData && responseData.code === 1 && Array.isArray(responseData.data)) {
          // 从data数组中提取temp_list数据
          let tempList = []
          responseData.data.forEach(item => {
            if (item.temp_list && Array.isArray(item.temp_list)) {
              tempList = tempList.concat(item.temp_list)
            }
          })
          
          this.accountTypeList = tempList.map(item => ({
            id: item.id,
            name: item.name || '未知类型'
          }))
        } else {
          console.error('账号类型列表数据格式异常:', responseData)
          this.accountTypeList = []
        }
      } catch (error) {
        console.error('获取账号类型列表失败:', error)
        this.accountTypeList = []
      }
    },
    
    selectAccountType(accountType) {
      if (accountType === 'all') {
        // 全选/取消全选逻辑
        if (this.selectedAccountTypes.includes('all')) {
          this.selectedAccountTypes = []
        } else {
          const allAccountTypeIds = this.accountTypeList.map(type => type.id)
          this.selectedAccountTypes = ['all', ...allAccountTypeIds]
        }
      } else {
        // 单个账号类型选择逻辑
        const index = this.selectedAccountTypes.indexOf(accountType)
        if (index > -1) {
          this.selectedAccountTypes.splice(index, 1)
          // 如果取消选择某个账号类型，同时取消全选
          const allIndex = this.selectedAccountTypes.indexOf('all')
          if (allIndex > -1) {
            this.selectedAccountTypes.splice(allIndex, 1)
          }
        } else {
          this.selectedAccountTypes.push(accountType)
          // 检查是否所有账号类型都被选中，如果是则自动选中全选
          const allAccountTypeIds = this.accountTypeList.map(type => type.id)
          if (allAccountTypeIds.every(id => this.selectedAccountTypes.includes(id))) {
            if (!this.selectedAccountTypes.includes('all')) {
              this.selectedAccountTypes.push('all')
            }
          }
        }
      }
    },
    closeModal() {
      this.$emit('close')
    },
    confirmSelection() {
      // 过滤掉'all'选项，只返回实际选中的账号类型ID
      const filteredSelection = this.selectedAccountTypes.filter(item => item !== 'all')
      this.$emit('confirm', filteredSelection)
      this.closeModal()
    }
  }
}
</script>

<style lang="scss" scoped>
.account-type-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: -16.5rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  
  .modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  
  .close-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .close-icon {
      font-size: 24px;
      color: #999;
      line-height: 1;
    }
  }
}

.account-type-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.account-type-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.selected {
    .account-type-name {
      color: #ff4757;
    }
  }
  
  .radio-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    &.checked {
      border-color: #ff4757;
      background-color: #ff4757;
      
      .check-icon {
        color: #fff;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  
  .account-type-name {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
  }
}

.complete-btn {
  margin: 16px 20px 20px;
  background-color: #ff4757;
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  .btn-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>